大規模言語モデルによる階層構造を考慮した自己修正型 UI コード生成
2506.13663 DesignCoder: Hierarchy-Aware and Self-Correcting UI Code Generation with Large Language Models
中国の大学の論文
DesignCoder
ネストされたUI構造を理解してUIを生成する際に高い能力をもつ
自己修復型
レンダリングのエラーを検出できない
近い話がどこかであったなrkasu.icon
型で絞れるけどみたいな
持続可能なアクセシビリティ開発
これか
UIのグループ化を推論してチェーン化するもの
UIの分割
セマンティクス抽出
グループ化
メタデータを分割することで意味付けと空間的な内容を理解してグループ化する
CSSはボトムアップで走査する
Appiumを使ってテストを行う
実験にはSketchファイルやFigmaファイルのモックアップを使用
MSE
画像の類似性を評価する
CLIP
UIの意味的な類似性を評価する
SSIM
UIの正確性を評価する
さらに、著者はMaterial Design 3を参照して、コンポーネントタイプの誤りを修正しました。例えば、「テキスト」タイプとラベル付けされていたテキストボタンは、「ボタン」タイプに修正されました。次に、階層構造を比較するための3つの指標を導入します。
へー
グループ化のモデル工程を削除するとUIの生成スコアが低下した
DeclarUI
Figma2Codeでは型がちゃんとしていないのでセマンティクス情報が雑
divを多様する
わかるーって内容が多かった
で結局画像から一発でバイブコーディングして成功することは複雑な情報を含むと限界がある
そのアプローチとしてそれぞれのコンテキストをメタデータとしてインプットして分割すれば精度が出るという内容だった
いずれFigmaもというか多分既にある?のかもしれないが同じ研究はやっていそう
抜け落ちやすい箇所=複雑ということなのだろうrkasu.icon
#論文 #UI